<template>
    <div
        class="callback float"
        @click.passive="onClick"
        @mousedown.passive="down"
        @touchstart.passive="down"
        @mousemove.passive="move"
        @touchmove.prevent="move"
        @mouseup.passive="end"
        @touchend.passive="end"
        ref="fu"
    >
        <slot name="default"></slot>
    </div>
</template>

<script>
export default {
    name: "MyFloatButton",
    emits:["click"],
    data() {
        return {
            isLoading: false,
            flags: false, //控制使用
            position: {
                x: 0,
                y: 0,
            },
            nx: "",
            ny: "",
            dx: "",
            dy: "",
            xPum: "",
            yPum: "",
        };
    },
    methods: {
        onRefresh() {
            // window.location.reload();
            setTimeout((res) => {
                this.isLoading = false;
            }, 1000);
        },
        down() {
            this.flags = true;
            var touch;
            if (event.touches) {
                touch = event.touches[0];
            } else {
                touch = event;
            }
            this.position.x = touch.clientX;
            this.position.y = touch.clientY;
            this.dx = this.$refs.fu.offsetLeft;
            this.dy = this.$refs.fu.offsetTop;
        },
        move() {
            if (this.flags) {
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                this.nx = touch.clientX - this.position.x;
                this.ny = touch.clientY - this.position.y;
                this.xPum = this.dx + this.nx;
                this.yPum = this.dy + this.ny;
                let width = window.innerWidth - this.$refs.fu.offsetWidth; //屏幕宽度减去自身控件宽度
                let height = window.innerHeight - this.$refs.fu.offsetHeight; //屏幕高度减去自身控件高度
                this.xPum < 0 && (this.xPum = 0);
                this.yPum < 0 && (this.yPum = 0);
                this.xPum > width && (this.xPum = width);
                this.yPum > height && (this.yPum = height);
                // if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
                this.$refs.fu.style.left = this.xPum + "px";
                this.$refs.fu.style.top = this.yPum + "px";
                // }
                //阻止页面的滑动默认事件
                // document.addEventListener(
                //     "touchmove",
                //     function () {
                //         event.preventDefault();
                //     },
                //     false
                // );
            }
        },
        //鼠标释放时候的函数
        end() {
            this.flags = false;
        },
        onClick() {
            //在这里我是作为子组件来使用的
            this.$emit("click");
        },
    },
};
</script>

<style scoped>
.callback {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: +1;
}
.float {
    position: fixed;
    touch-action: none;
}
</style>
